<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>房源类型列表</span>
        </div>
      </template>

      <VTable
        :tableData="tableData"
        :options="options"
        @getSelection="handleSelection"
      >
        <template #menubtn>
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <el-button type="warning" @click="handleBatchDelete"
            >批量删除</el-button
          >
        </template>
        <template #operate="scope">
          <el-button
            size="small"
            link
            type="primary"
            :icon="Edit"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            link
            type="danger"
            :icon="Delete"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </VTable>

      <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        style="width: 600px"
      >
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
        >
          <el-form-item label="房源类型" prop="type">
            <el-input v-model="ruleForm.type"> </el-input>
          </el-form-item>
        </el-form>
        <template #footer
          ><el-button @click="resetForm(ruleFormRef)">关闭</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            确定
          </el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import {
  getAllHomeType,
  addHomeType,
  deleteHomeType,
  batchDeleteHomeType,
  updateHomeType,
} from "../../api/homeTypeManage/index";
import VTable from "../../components/VTable/index.vue";
import { Delete, Edit, View, Plus, List } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";

const options = [
  {
    prop: "type",
    label: "类型",
    isTable: true,
  },
  {
    prop: "createTime",
    label: "创建时间",
    isTable: true,
    type: "time",
  },
];

let ruleForm = reactive({
  type: "",
});
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  type: [{ required: true, message: "请输入房源类型", trigger: "blur" }],
});

const dialogTitle = ref("查看"); // 弹出层标题
const dialogVisible = ref<boolean>(false);
const actionType = ref(""); // 操作按钮的类型
const setDialogTile = (type: string) => {
  dialogTitle.value = type;
  actionType.value = type;
  dialogVisible.value = true;
};

//新增
const handleAdd = () => {
  ruleForm = reactive({
    type: "",
  });
  setDialogTile("新增");
};

//编辑
const handleEdit = async (scope: any) => {
  ruleForm = scope;
  setDialogTile("编辑");
};

//删除
const handleDelete = async (id: number) => {
  ElMessageBox.confirm("确认删除此项数据?", "系统提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      console.log(id);
      const res = await deleteHomeType(id);
      if (res.data.success == true) {
        ElMessage({
          message: res.data.msg,
          type: "success",
        });
      } else {
        ElMessage.error(res.data.msg);
      }
      await onLoad();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
//子组件传值--多选
const ids = ref<any>([]);
const handleSelection = (val: any) => {
  const selecction: any = [];
  val.forEach((item: any) => {
    selecction.push(item.id);
  });
  ids.value = selecction;
  console.log("ids.value:", ids.value);
};
// 批量删除
const handleBatchDelete = async () => {
  if (ids.value.length == 0) {
    ElMessage({
      type: "info",
      message: "请选择数据",
    });
    return;
  }
  ElMessageBox.confirm("确认删除这些数据?", "系统提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await batchDeleteHomeType({ ids: ids.value });
      if (res.data.success) {
        ElMessage({
          message: res.data.msg,
          type: "success",
        });
      } else {
        ElMessage.error(res.data.msg);
      }
      onLoad();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

const tableData = ref<any>([]);
const onLoad = async () => {
  const res = await getAllHomeType();
  console.log(res);
  tableData.value = res.data.data;
};

// 提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  console.log(ruleForm);
  if (actionType.value === "新增") {
    const res = await addHomeType(ruleForm);

    if (res.data.success == true) {
      ElMessage({
        message: res.data.msg,
        type: "success",
      });
    } else {
      ElMessage.error(res.data.msg);
    }
  } else if (actionType.value === "编辑") {
    const res = await updateHomeType(ruleForm);
    if (res.data.success) {
      if (res.data.success == true) {
        ElMessage({
          message: res.data.msg,
          type: "success",
        });
      } else {
        ElMessage.error(res.data.msg);
      }
    }
  }
  onLoad();
  dialogVisible.value = false;
};

onMounted(async () => {
  await onLoad();
});
</script>

<style></style>
